<template>
    <rx-layout>
        <div slot="center">
            <rx-fit :isheader="isheader">
                <div slot="toolheader" border="false" foldbtn="false">
                    <div class="table-operator">
                        <rx-button
                            alias="insMsgboxDefAdd"
                            :butn-icon="'plus'"
                            :butn-type="'primary'"
                            :show-no-right="true"
                            @click="add"
                        >
                            {{ $ti18('rxList.newBtn', '新建') }}
                        </rx-button>
                    </div>
                    <span class="search-btn-box" v-if="!isheader">
                        <span class="search-btn" @click.stop="searchshow">
                            <i class="iconfont iconguolv" />{{ $ti18('rxList.leachBtn', '过滤') }}</span
                        >
                    </span>
                </div>
                <div
                    btnalign="right"
                    slot="searchbar"
                    v-if="fitSearch"
                    @search="search"
                    @cancel="cancel"
                    @close="closeSearchbar"
                >
                    <a-form :layout="colLayout">
                        <a-row :gutter="24">
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.key', '标识键')">
                                    <a-input
                                        :placeholder="i18n('form.key', '标识键', 'input')"
                                        v-model="queryParam.Q_KEY__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan">
                                <a-form-item :label="i18n('form.name', '名字')">
                                    <a-input
                                        :placeholder="i18n('form.name', '名字', 'input')"
                                        v-model="queryParam.Q_NAME__S_LK"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="colSpan" v-if="!curApp.appId">
                                <a-form-item :label="$ti18('rxForm.appId', '应用')">
                                    <rx-search-app @change="appChange" v-model="searchApps"> </rx-search-app>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <rx-grid
                    ref="table"
                    :bordered="isBorder"
                    :multiSelect="true"
                    :columns="columns"
                    :defaultPageSize="10"
                    url="/api-portal/portal/core/insMsgboxDef/query"
                    :queryParam="queryParam"
                    data-field="result.data"
                    :pageSizeOptions="['10', '30', '40']"
                    id-field="boxId"
                    @selectChange="onSelectChange"
                >
                    <span slot="exportApp">
                        {{ exportI18n('export.isExport', '导出') }}
                        <export-app />
                    </span>
                    <span slot="appId" slot-scope="{ text, record }">
                        {{ allApps[text] ? $i18(allApps[text].appName, '应用名称') : $ti18('rxList.noAppName', '无') }}
                    </span>
                    <span slot="isExport" slot-scope="{ text, record }">
                        <a-tag :color="text == 1 ? 'green' : 'red'">
                            <span>{{
                                text == 1 ? exportI18n('export.yes', '是') : exportI18n('export.no', '否')
                            }}</span>
                        </a-tag>
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="editEnable && showBtn(true)" @click="edit(record)">{{
                            $ti18('rxList.editBtn', '编辑')
                        }}</span>
                        <span v-if="removeEnable && showBtn(true)" @click="delByIds([record.boxId])">{{
                            $ti18('rxList.delBtn', '删除')
                        }}</span>
                        <span @click="setExport(record, exportConf)">{{
                            record.isExport == 1
                                ? exportI18n('export.noExport', '不导出')
                                : exportI18n('export.exported', '导出')
                        }}</span>
                    </span>
                </rx-grid>
            </rx-fit>
        </div>
    </rx-layout>
</template>

<script>
import InsMsgboxDefApi from '@/api/portal/core/insMsgboxDef'
import InsMsgboxDefEdit from './InsMsgboxDefEdit'
import { BaseList, RxDialog } from '@lowcode/jpaas-common-lib'
import { mapState } from 'vuex'
import exportApp from '@/views/modules/share/exportApp'
import AppSearch from '@/views/modules/share/AppSearch'
import RxSearchApp from '@/views/modules/share/rx-search-app'
import switchExport from '@/utils/switchExport'

export default {
    name: 'InsMsgboxDefList',
    mixins: [BaseList, AppSearch, switchExport],
    components: {
        RxDialog,
        exportApp,
        RxSearchApp,
    },
    computed: {
        ...mapState({
            // 所属应用
            allApps: (state) => (state.appSetting ? state.appSetting.allApps : {}),
        }),
    },
    data() {
        return {
            columns: [
                {
                    title: '序号',
                    dataIndex: 'serial',
                    type: 'indexColumn',
                    scopedSlots: { customRender: 'serial' },
                    width: 50,
                },
                { title: this.i18n('form.key', '标识键'), width: 240, dataIndex: 'key' },
                { title: this.i18n('form.name', '名字'), width: 200, dataIndex: 'name' },
                {
                    title: this.i18n('form.appId', '所属应用'),
                    dataIndex: 'appId',
                    width: 140,
                    sortField: 'APP_ID_',
                    scopedSlots: { customRender: 'appId' },
                },
                {
                    dataIndex: 'isExport',
                    slots: { title: 'exportApp' },
                    width: 60,
                    scopedSlots: { customRender: 'isExport' },
                },
                { title: this.$ti18('rxForm.createTime', '创建时间'), dataIndex: 'createTime', width: 120 },
                {
                    title: this.$ti18('rxList.action', '操作'),
                    dataIndex: 'action',
                    width: 120,
                    scopedSlots: { customRender: 'action' },
                },
            ],
            component: InsMsgboxDefEdit,
            comment: this.i18n('list.comment', '栏目消息盒子表'),
            widthHeight: ['800px', '600px'],
            /**
             * 导出配置
             */
            exportConf: {
                Api: InsMsgboxDefApi,
                id: 'pkId',
            },
        }
    },
    created() {
        this.needFilterAppId()
        this.columns = this.removeAppColumn(this.curApp.appId, this.columns)
    },
    methods: {
        refreshGrid() {
            let table = this.$refs.table
            if (table) {
                table.clearSelected()
                table.loadData()
                this.$message.success('保存成功!')
            }
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, 'InsMsgboxDef', key)
        },
        exportI18n(name, text, key) {
            return this.$ti18(name, text, 'appExport', key)
        },
        delById(ids) {
            return InsMsgboxDefApi.del({ ids: ids.join(',') })
        },
        getListByParams(parameter) {
            return InsMsgboxDefApi.query(parameter)
        },
        search() {
            this.$refs.table.loadData()
        },
        cancel() {
            this.resetSearch()
        },
        closeSearchbar() {
            //关闭过滤弹窗；（点击X触发）
            this.fitSearch = false
        },
    },
}
</script>
<style scoped></style>
